<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./resrt.css">
    <style>
        #app{
            width: 400px;
            padding: 10px;
            margin: 100px auto;
        }
        .top{
            display: flex;
        }
        .top input{
            width: 300px;
            border: 1px solid #eee;
            padding-left: 20px;
            height: 50px;
        }
        .top button{
            margin-left: 10px;
            flex: 1;
            height: 50px;
        }
        .center{
            display: flex;
            justify-content: space-between;
            line-height: 50px;
            text-align: center;
        }
        .list{
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            background-color: blue;
            height: 50px;
        }
        .change{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top">
            <input type="text" v-model="from">
            <button @click="add">添加</button>
        </div>
        <div class="center">
            <h2>全部任务 {{list.length}} </h2>
            <h2>未完成 {{list.length - sum}} </h2>
            <h2>已完成 {{sum}} </h2>
        </div>
        <div class="bottom">
            <div :class="`list ${item.state ? 'change' : ''} `" v-for="(item , index) in list" :key="index">
                <input type="checkbox" @click="change(item)">
                <p> {{item.text}} </p>
                <button @click="move(index)">删除</button>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var num = 0
    var v = new Vue({
        el:'#app',
        data:{
            from: '',
            list:[

            ],
            sum:0
        },
        methods:{
            add(){
                this.from ? this.list.push({id: ++num , text:this.from , state : false}) : ''
                this.from = ''
            },
            change(item){
                item.state = !item.state
            },
            move(index){
                this.list.splice(index , 1)
            }
        },
        computed:{
            // wancheng(){
            //     return this.list.filter((item) => {
            //         return item.state
            //     }).length
            // }
        },
        watch:{
            list:{
                handler(){
                    this.sum = this.list.filter((item) => {return item.state}).length
                },
                deep:true
            }
        },
        directives:{
            jiesuan(el){
                el.innerText += this.list.filter((item) => {return item.state}).length
            }
        }

    })
</script>